<template>
  <div class="head">
    <el-row :gutter="0" class="row1">
      <el-col :span="4">
        <el-input v-model="merchantParams.id" size="large" clearable placeholder="商品编号" />
      </el-col>
      <el-col :span="4">
        <el-input size="large" v-model="merchantParams.barCode" placeholder="条码编号" clearable />
      </el-col>
      <el-col :span="4">
        <el-select size="large" placeholder="所属门店" clearable v-model="merchantParams.shopId" style="width: 200px">
          <el-option v-for="item in shopsList" :label="item.name" :value="item.id" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="large" clearable v-model="merchantParams.categoryIdSel" placeholder="商品分类"
          style="width: 200px">
          <el-option v-for="item in categoryList" :label="item.name" :value="item.id" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input size="large" clearable placeholder="智能搜索" />
      </el-col>
      <el-col :span="4">
        <el-input size="large" v-model="merchantParams.nameLike" clearable placeholder="商品名称" />
      </el-col>
      <el-col :span="4">
        <el-input size="large" placeholder="别名" clearable />
      </el-col>
      <el-col :span="4">
        <el-input size="large" placeholder="商品特色" clearable />
      </el-col>
      <el-col :span="4">
        <el-input size="large" v-model="merchantParams.tagsLike" placeholder="标签、关键词" clearable />
      </el-col>
      <el-col :span="4">
        <el-select size="large" v-model="merchantParams.status" placeholder="上架状态" clearable style="width: 200px">
          <el-option label="上架" value="0" />
          <el-option label="下架" value="1" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="large" v-model="merchantParams.recommendStatus" clearable placeholder="推荐状态"
          style="width: 200px">
          <el-option label="推荐" value="1" />
          <el-option label="不推荐" value="0" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="large" placeholder="审核状态" clearable style="width: 200px">
          <el-option label="待审核" value="1" />
          <el-option label="通过" value="2" />
          <el-option label="不通过" value="3" />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="large" placeholder="拼团状态" clearable style="width: 200px">
          <el-option label="开启拼团" value="1" />
          <el-option label="关闭拼团" value="2" />
        </el-select>
      </el-col>
      <el-button type="primary" size="default" @click="onSubmit" :icon="Search">搜索</el-button>
    </el-row>
  </div>
  <div class="head-but">
    <el-button type="danger" size="default" :icon="UploadFilled">批量导入</el-button>
    <el-button type="success" size="default" :icon="Plus" @click="goAdd">单个发布</el-button>
    <span>下载Excel模板</span>
  </div>
  <el-tabs type="border-card" v-model="activeName" @tab-change="handleClick">
    <el-tab-pane v-for="item in list" :label="item.label" :name="item.name">
      <div>
        <el-table v-loading="loadingFlag" ref="multipleTableRef" :data="tableData" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="图片">
            <template #default="scope">
              <img class="pic" :src="scope.row.pic" />
            </template>
          </el-table-column>
          <el-table-column label="编号/条码">
            <template #default="scope">
              <p>{{ scope.row.id }}</p>
              <p>{{scope.row.barCode}}</p>
            </template>
          </el-table-column>
          <el-table-column label="门店/分类">
            <template #default="scope">
              <p>-</p>
              <p>{{scope.row.categoryName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template #default="scope">
              <p>{{scope.row.name}}</p>
              <p>{{scope.row.subName}}</p>
            </template>
          </el-table-column>
          <el-table-column label="库存/状态">
            <template #default="scope" class="zhuangtai">
              <p>0</p>
              <el-button type="success" plain disabled style="margin: 5px 0px;">审核通过</el-button>
              <el-button type="danger" plain disabled style="margin: 5px 0px;">下架</el-button>
              <el-button type="success" plain disabled style="margin: 5px 0px;">默认展示</el-button>
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template #default="scope">
              <p>商品原价 : {{scope.row.minPrice}}</p>
              <p>最低价格 : {{scope.row.originalPrice}}</p>
              <p>砍价底价 : {{scope.row.originalPrice}}</p>
              <p>团购价格 : {{scope.row.originalPrice}}</p>
            </template>
          </el-table-column>
          <el-table-column label="数据统计">
            <template #default="scope">
              <p>浏览量 : {{scope.row.views}}</p>
              <p>收藏量 : {{scope.row.numberFav}}</p>
              <p>订单数 : 1</p>
              <p>销售数 : 1</p>
              <p>好评数 : 1</p>
            </template>
          </el-table-column>
          <el-table-column label="满意度">
            <template #default="scope">
              <p>赞 : 0</p>
              <p>踩 : 0</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" type="expand">
            <template #default="scope">
              <div class="demo-collapse">
                <el-collapse @change="handleChange">
                  <el-link type="success" :underline="false">[复制]</el-link>
                  <el-link type="success" :underline="false">[编辑]</el-link>
                  <el-link type="success" :underline="false">[批量设置sku]</el-link>
                  <el-link type="success" :underline="false">[销量]</el-link>
                  <el-link type="success" :underline="false">[库存]</el-link>
                  <el-link type="primary" :underline="false">[会员价]</el-link>
                  <el-link type="primary" :underline="false">[分级定价]</el-link>
                  <el-link type="primary" :underline="false">[可选配件]</el-link>
                  <el-link type="primary" :underline="false">[按天定价]</el-link>
                  <el-link type="warning" :underline="false">[限购]</el-link>
                  <el-link type="danger" :underline="false">[下架]</el-link>
                  <el-link type="danger" :underline="false">[删除]</el-link>
                </el-collapse>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
  <div style="margin-top: 20px">
    <el-button type="success">修改类目</el-button>
    <el-button type="success">上架</el-button>
    <el-button type="warning">下架</el-button>
    <el-button type="success">推荐</el-button>
    <el-button type="warning">不推荐</el-button>
    <el-button type="success">审核通过</el-button>
    <el-button type="warning">审核不通过</el-button>
    <el-button type="danger">会员限购</el-button>
    <el-button type="danger" @click="toggleSelection([tableData[1], tableData[2]])">批量删除</el-button>
  </div>
  <el-pagination v-model:currentPage="merchantParams.page" v-model:page-size="merchantParams.pageSize"
    :page-sizes="[10,20,30,40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
    @size-change="sizeChange" @current-change="currentChange" style="margin-top: 15px;" />
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElTable } from "element-plus";
import { Search, Plus, UploadFilled } from "@element-plus/icons-vue";
import { goodsList, shopList, goodsCateList } from "../api/goods"

import { useRouter } from "vue-router"
let router = useRouter()


const multipleTableRef = ref("");
const handleChange = ref("")
const handleSelectionChange = ref("")
let tableData = ref([])

let activeName = ref("2")
let total = ref(0)

let loadingFlag = ref(true)

let shopsList = ref([])

let categoryList = ref([])

// 跳转到添加页面
function goAdd() {
  router.push("/merchant/add")
}

// 列表
let list = ref([
  {
    label: "全部",
    name: "1"
  },
  {
    label: "销售中",
    name: "2"
  },
  {
    label: "已售罄",
    name: "3"
  },
  {
    label: "仓库中",
    name: "4"
  }
])

let merchantParams = reactive({
  id: "",// 商品编号
  nameLike: "",// 商品名称
  recommendStatus: "",// 推荐状态
  tagsLike: "",// 标签
  status: "",// 状态
  barCode: "",// 条码编号
  shopId: "",
  page: 1,
  pageSize: 10,
  goodsType: 2,
  categoryIdSel: ""
})

// tab切换
function handleClick(value) {
  loadingFlag.value = true
  merchantParams.goodsType = value
  merchantParams.page = 1;
  getList()
}

// 搜索按钮
function onSubmit() {
  merchantParams.page = 1;
  getList()
}

function currentChange(val) {
  merchantParams.page = val
  getList()
}

function sizeChange(val) {
  merchantParams.page = 1
  merchantParams.pageSize = val
  getList()
}
// 删除按钮
function toggleSelection() {
  console.log("批量删除的按钮")
}

// 获取列表
function getList() {
  goodsList(merchantParams).then(res => {
    loadingFlag.value = false
    if (res.code === 0) {
      tableData.value = res.data.result
      total.value = res.data.totalRow
    } else {
      tableData.value = []
    }
  })
}

// 获取商品类别
function getGoodList() {
  goodsCateList().then(res => {
    categoryList.value = res.data
  })
}

// 获取商店列表
function getShopList() {
  shopList().then(res => {
    // console.log(res)
    if (res.code === 0) {
      shopsList.value = res.data.result
    } else {
      shopsList.value = []
    }
  })
}

onMounted(() => {
  getList()
  getShopList()
  getGoodList()
})
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
}

.head-but {
  margin: 10px 0;

  span {
    font-size: 14px;
    color: #e6a23c;
    text-decoration: underline;
  }
}

.el-table {
  &:deep(.cell) {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}

.el-input {
  width: 200px;
  height: 40px;
}

.row1 {
  display: flex;
  align-items: center;
}

img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.el-link {
  float: right;
  margin: 0px 10px;
}

.el-collapse {
  height: 65px;
  border: none;
  line-height: 65px;
}
</style>